<template>
	<view class="e-notice-bar" v-if="show" :style="[{
			backgroundColor: props.bgColor
		}, addStyle(props.customStyle)]">
		<template v-if="props.direction === 'column' || (props.direction === 'row' && props.step)">
			<column-notice :color="props.color" :bgColor="props.bgColor" :text="props.text" :mode="props.mode"
				:step="props.step" :icon="props.icon" :disable-touch="props.disableTouch" :fontSize="props.fontSize"
				:duration="props.duration" @close="close" @click="click"></column-notice>
		</template>
		<template v-else>
			<row-notice :color="props.color" :bgColor="props.bgColor" :text="props.text" :mode="props.mode"
				:fontSize="props.fontSize" :speed="props.speed" :url="props.url" :linkType="props.linkType"
				:icon="props.icon" @close="close" @click="click"></row-notice>
		</template>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * noticeBar 滚动通知
	 * @description 该组件用于滚动通告场景，有多种模式可供选择
	 * @tutorial https://www.uviewui.com/components/noticeBar.html
	 * @property {Array | String}	text			显示的内容，数组
	 * @property {String}			direction		通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
	 * @property {Boolean}			step			direction = row时，是否使用步进形式滚动  ( 默认 false )
	 * @property {String}			icon			是否显示左侧的音量图标 ( 默认 'volume' )
	 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
	 * @property {String}			color			文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
	 * @property {String}			bgColor			背景颜色 ( 默认 '#fdf6ec' )
	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
	 * @property {String | Number}	fontSize		字体大小 ( 默认 14 )
	 * @property {String | Number}	duration		滚动一个周期的时间长，单位ms ( 默认 2000 )
	 * @property {Boolean}			disableTouch	是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
	 * @property {String}			url				跳转的页面路径
	 * @property {String}			linkType		页面跳转的类型 ( 默认 navigateTo )
	 * @property {Object}			customStyle		定义需要用到的外部样式
	 * 
	 * @event {Function}			click			点击通告文字触发
	 * @event {Function}			close			点击右侧关闭图标触发
	 * @example <e-notice-bar :more-icon="true" :list="list"></e-notice-bar>
	 */
	export default defineComponent({
		name: "e-notice-bar",
		mixins: [mpMixin]
	});
</script>

<script lang="ts" setup>
	import {
		ref,
		toRefs
	} from 'vue'
	import {
		noticeBarProps,
		noticeBarEmits
	} from './props'
	import {
		addStyle,
		openPage
	} from "../../libs/utils/_utils";
	import {
		useDefaultProps,
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	import columnNotice from './column-notice/index.vue'
	import rowNotice from './row-notice/index.vue'

	const {
		noticeBar: noticeBarDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(noticeBarProps)
	const props = useDefaultProps < DefaultProps['noticeBar'] > (_props, noticeBarDefaultProps);
	const emit = defineEmits(noticeBarEmits)

	const show = ref(true)

	// 点击通告栏
	const click = (index: number) => {
		emit('click', index)
		if (props.value.url && props.value.linkType) {
			// 此方法写在mixin中，另外跳转的url和linkType参数也在mixin的props中
			openPage(props.value.url, props.value.linkType)
		}
	}
	// 点击关闭按钮
	const close = () => {
		show.value = false
		emit('close')
	}
</script>

<style lang="scss" scoped>
	@import '../../libs/theme/noticeBar.scss';
</style>
